<template>
  <div>
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
    <div class="vm-findSuppliers-container">
      <vm-common-search-view
        :screen="false"
        placeholderV=" 请输入供应商名称或编码"
        ref="searchView"></vm-common-search-view>
      <div class="vm-header-content">
        <h5>所属分类: {{ item.name }}</h5>
        <h5>共计: {{ item.num }}家供应商</h5>
        <span @click="openAddress">{{ addressTextC }}</span>
      </div>
      <div class="vm-common-work_bench">
        <mt-loadmore
          :top-method="loadTop"
          :bottom-method="loadBottom"
          :bottom-all-loaded="allLoaded"
          ref="loadmore"
          :autoFill="false">
          <ul>
            <li
              class="vm-work_bench-item"
              v-for="(item,key) in findSupplier.data"
              :key="key">
              <router-link class="mui-slider-handle" tag="div" :to="`/company?id=${item.comID}`">
                <h5 class="vm-work_bench-item-title">
                  <h3>{{ item.cCompanyName }}</h3>
                </h5>
                <div class="vm-work_bench-item-body">
                  <div style="flex: 1;">
                    <span>所在地区：</span>
                    <em>{{ item.cityname }}</em>
                  </div>
                  <div>
                    <span>注册资金：</span>
                    <em class="is-status-o">{{ item.fRegisteredCapital }}万</em>
                  </div>
                  <div style="width: 100%;">
                    <span>成立时间：</span>
                    <em>{{ item.cMakeDate }}</em>
                  </div>
                </div>
              </router-link>
            </li>
          </ul>
          <vm-common-noData v-if="!findSupplier.data.length"></vm-common-noData>
        </mt-loadmore>
      </div>
    </div>
    <x-address
      style="display:none;"
      title="公司所在地区"
      v-model="value"
      :list="addressData"
      placeholder="请选择地址"
      :show.sync="showAddress"
      :hide-district="true"
      @on-shadow-change="selectCityText"></x-address>
  </div>
</template>

<style scoped>
  .vm-findSuppliers-container {
    height: 100%;
  }
  .vm-common-work_bench {
    height: calc(100% - 300px);
  }
  .vm-findSuppliers-container {}
  .vm-findSuppliers-container .vm-header-content {
    background-color: #ffffff;
    padding: 20px 0 18px 35px;
    height: 185px;
    text-align: left;
  }
  .vm-findSuppliers-container .vm-header-content h5{
    text-align: left;
    color: #666666;
    font-size: 26px;
    height: 50px;
  }
  .vm-findSuppliers-container .vm-header-content span {
    padding: 10px;
    height: 58px;
    min-width: 188px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #f44b50;
    font-size: 24px;
    border: 1px solid #f44b50; /* no */
    border-radius: 15px; /* no */
  }
</style>

<script>
  import vmCommonHeader from '@/components/vm-common-header' // header 组件
  import vmCommonSearchView from '@/components/vm-common-search-view.vue'
  import { Supplychain_supplierDetails } from '@/api/find_suppliers.js'
  import { XAddress, ChinaAddressV4Data   } from 'vux'
  export default {
    data() {
      return {
        pageTitle: this.$route.meta.pageTitle,
        goBack: this.$route.meta.goBack,
        item: {
          id: this.$route.query.id,
          name: this.$route.query.name,
          num: 0
        },
        allLoaded: false,
        findSupplier: {
          page: 1,
          data: new Array(),
          pageRows: 10,
          province: '', // 省
          city: '', // 市
          country: '', // 区
          search_invname: '' // 搜索内容
        },
        showAddress: false,
        addressData: ChinaAddressV4Data, // 收货地址 省、市、区数据
        addressText: '',
        addressTextC: '公司所在地区',
        addressTextFlag: false,
        value: new Array()
      }
    },
    created () {
      this.getSuppliersData();
      this.bindEventBus();
    },
    methods: {
      bindEventBus() {
        this.$root.Bus.$on("vmCommonSearchV", (data) => {
          this.findSupplier.search_invname = data;
          this.getSuppliersData();
        });
      },
      // 下拉刷新
      loadTop() {
        this.findSupplier.page = 1;
        this.getSuppliersData('top');
      },
      // 上拉加载
      loadBottom() {
        this.findSupplier.page ++;
        this.getSuppliersData('bottom');
      },
      // 获取供应分类信息
      getSuppliersData (loadmoreType) {
        let page = this.findSupplier.page;
        let pageRows = this.findSupplier.pageRows;
        let now_province = this.findSupplier.province;
        let now_city = this.findSupplier.city;
        let inv_id = this.item.id;
        let name = this.item.name;
        let search_invname = this.findSupplier.search_invname;
        Supplychain_supplierDetails({page, pageRows, inv_id, name, now_province, now_city, search_invname})
          .then(res => {
            this.item.num = res.data.data.total;
            if (res.data.data.data == null) {
              this.findSupplier.data = [];
              this.allLoaded = true; // 若数据已全部获取完毕
              if (loadmoreType == 'top') {
                this.$refs.loadmore.onTopLoaded();
              } else if (loadmoreType == 'bottom') {
                this.$refs.loadmore.onBottomLoaded();
              }
              return;
            }
            if (!this.findSupplier.data.length || page == 1) {
              this.allLoaded = false;
              this.findSupplier.data = res.data.data.data;
            } else {
              this.findSupplier.data = this.findSupplier.data.concat(res.data.data.data);
            }
            if (loadmoreType == 'top') {
              this.$refs.loadmore.onTopLoaded();
            } else if (loadmoreType == 'bottom') {
              this.$refs.loadmore.onBottomLoaded();
            }

          })
      },
      // 打开地区选择
      openAddress () {
        this.showAddress = true;
      },
      // 当点击确定时，触发该方法。
      addressTextF () {
        this.addressTextC = this.addressText;
        this.addressTextFlag = false;
      },
      // 获取地区信息
      selectCityText (ids, names) {
         this.addressText = names.join(' ');
      }
    },
    watch: {
      value(CityCode) {
        this.addressTextFlag = true;
        this.findSupplier.province = CityCode[0].substring(0, 2); // 省
        this.findSupplier.city = CityCode[1].substring(0, 4); // 市
        console.log(CityCode);
        this.getSuppliersData();
      },
      addressText (newV) {
        console.log(newV);
      },
      addressTextFlag (b) {
        b && this.addressTextF();
      }
    },
    beforeDestroy () {
      this.$root.Bus.$off();
    },
    components: {
      'vm-common-header': vmCommonHeader,
      'vm-common-search-view': vmCommonSearchView,
      XAddress,
    }
  }
</script>
